.clearfix() {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

.lineLimit(@lineNumber:1){
    word-break: break-all;
    text-overflow: ellipsis;//可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本 。
    display: -webkit-box; //必须结合的属性,对象作为伸缩盒子模型显示
    -webkit-box-orient: vertical; // 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式
    -webkit-line-clamp: @lineNumber; //用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他的WebKit属性。
    overflow: hidden; //隐藏超出的内容
}
.p_lineLimit(@lineNumber:1){
  p{
    .lineLimit(@lineNumber);
  }
}

.multi(@line) {
  overflow : hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: @line;
  -webkit-box-orient: vertical;
}

.flex() {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-box;
  > div,li {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -ms-box-flex: 1;
    text-align: center;
  }
}

.ell() {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.padding-base() {
  padding-left: @padding-leftOrRight-base;
  padding-right: @padding-leftOrRight-base;
}

.size(@width, @height) {
  width: @width*@px;
  height: @height*@px;
}

.makeCenter(){
  position: absolute;
  top:50%;
  left: 50%;
  transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
}

.makeCenterY(){
  position: absolute;
  top:50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}

.makeCenterX(){
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
}

.htmlStyle(){
  p,
  span{
    color: black;
  }
}